<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poster</title>
    <link rel="stylesheet" href="./lib/style.css">
    <link rel="stylesheet" href="./lib/styleZwlm1.css">
    <style>
        @font-face {
            font-family: 'HanyiYakuHeiW';
            src: url('./lib/汉仪雅酷黑W.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Suika';
            src: url('./lib/Suika-DEMO.otf') format('truetype');
        }

        body {
            background-color: #FFFEEC;
        }

        img {
            display: block;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }

        .paper {
            background: #FFD0D8;
            padding: 0;
            font-family: '微软雅黑';
        }

        .poster-top {
            font-family: '汉仪雅酷黑W', 'HanyiYakuHeiW', sans-serif;
            position: relative;

        }

        .poster-title-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .poster-title-box img {
            width: 32%;
            margin-top: 48px;
        }

        .poster-fill,
        .poster-fill-body {
            position: relative;
        }

        .poster-fill-body img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
        }

        .little-title {
            font-family: 'Suika-DEMO', 'Suika', '汉仪雅酷黑W', 'HanyiYakuHeiW';
            position: absolute;
            top: 26px;
            left: 42px;
        }

        .music {
            position: relative;
            margin: 0 64px;
            font-family: "微软雅黑";
            color: #FF6088;
            padding-bottom: 6px;
        }

        .list_tag {
            font-size: 24px;
            text-align: center;
            font-weight: bold;

        }

        .music_list {
            font-size: 20px;
            font-weight: bold;
            display: grid;
            width: 100%;
            margin-top: 10px;
            grid-template-columns: repeat(var(--col), 1fr);
        }

        .bottomQQ {
            /* margin-top: -224px; */
            position: absolute;
            width: 100%;
            bottom: 0;
            text-align: center;
        }

        .ewm2 {
            padding: 3px;
            width: 150px;
            height: 150px;
            display: inline-block;
            margin-right: 6px;
            background: #fff;
            border-radius: 10px;
        }

        .join_us {
            font-family: '汉仪雅酷黑W', 'HanyiYakuHeiW';
            display: block;
            margin-bottom: 12px;
        }

        .musicItem {
            /* line-height: 20px; */
            /* overflow: hidden; */
            /* text-overflow: ellipsis; */
            white-space: nowrap;
            /* padding-bottom: 8px; */
        }

        .detail_site {
            position: absolute;
            right: 55px;
            top: -40px;
            font-size: 24px;
            color: #FF6088;
            text-shadow: #fff 1px 1px 2px;
            width: 360px;
            white-space: pre-line;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="paper" :style="'--col:'+col+';'">
            <div class="poster-top">
                <img src="./lib/poster/Top.png" width="100%" alt="">
                <div class="poster-title-box">
                    <img src="./lib/poster/logo.png" alt="" srcset="">
                    <!-- <div class="poster-title">
                        {{posterTitle}}
                    </div> -->
                    <!-- 时间 -->
                    <i style="margin-top: 20px;">
                        <svg width="620" height="80" class="time">
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FF7B9C" stroke-width="6"
                                style="text-shadow: 2px 2px 8px #FF7B9C;">
                                {{date}}
                            </text>
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FFFFFF" stroke-width="2.5">
                                {{date}}
                            </text>
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle">
                                {{date}}
                            </text>
                        </svg>
                    </i>

                    <!-- 标题 -->
                    <i>
                        <svg width="630" height="140">
                            <text x="300" y="70" font-size="120" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FF7B9C" stroke-width="6"
                                style="text-shadow: 2px 2px 8px #FF7B9C;">
                                {{posterTitle}}
                            </text>
                            <text x="300" y="70" font-size="120" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FFFFFF" stroke-width="2.5">
                                {{posterTitle}}
                            </text>
                            <text x="300" y="70" font-size="120" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle">
                                {{posterTitle}}
                            </text>
                        </svg>
                    </i>
                    <!-- 地点 -->
                    <i style="margin-top: 8px;">
                        <svg width="630" height="80">
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FF7B9C" stroke-width="6"
                                style="text-shadow: 2px 2px 8px #FF7B9C;">
                                {{site}}
                            </text>
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FFFFFF" stroke-width="2.5">
                                {{site}}
                            </text>
                            <text x="300" y="40" font-size="42" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle">
                                {{site}}
                            </text>
                        </svg>
                    </i>
                </div>
            </div>
            <div class="poster-fill">
                <i class="detail_site join_us">
                    {{siteDetail}}
                </i>
                <img src="./lib/poster/bar.png" width="100%" alt="">
                <!-- 小标题 -->
                <i class="little-title">
                    <svg width="240" height="50">
                        <text x="120" y="25" font-size="42" fill="#FF7B9C" text-anchor="middle"
                            dominant-baseline="middle" stroke="#FF7B9C" stroke-width="2"
                            style="text-shadow: 2px 2px 8px #FF7B9C;">
                            {{title2}}
                        </text>
                        <text x="120" y="25" font-size="42" fill="#FF7B9C" text-anchor="middle"
                            dominant-baseline="middle" stroke="#FFFFFF" stroke-width="1">
                            {{title2}}
                        </text>
                        <text x="120" y="25" font-size="42" fill="#FF7B9C" text-anchor="middle"
                            dominant-baseline="middle">
                            {{title2}}
                        </text>
                    </svg>
                </i>
                <!-- 歌曲列表 -->
                <div class="poster-fill-body">
                    <img src="./lib/poster/body.png" width="100%" alt="">
                    <div class="music">
                        <template v-for="group in getList">
                            <div class="list_tag"><i>{{group.groupName}}</i>【{{group.children.length}}首】</div>
                            <div class="music_list">
                                <div class="musicItem" v-for="(item,index) in group.children" :key="index">
                                    {{formatStr(item)}}</div>
                            </div>
                        </template>
                    </div>
                </div>

                <img src="./lib/poster/foot.png" width="100%" alt="">
            </div>
            <div>
                <img src="./lib/poster/Bottom.png" alt="" width="100%">
                <div class="bottomQQ">
                    <img class="ewm2" :src="erWeiMa" alt="">
                    <i class="join_us" style="margin-top: 8px;">
                        <svg width="600" height="40">
                            <text x="300" y="20" font-size="28" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FF7B9C" stroke-width="2"
                                style="text-shadow: 2px 2px 8px #FF7B9C;">
                                南昌随舞官方群号：{{joinId}}
                            </text>
                            <text x="300" y="20" font-size="28" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle" stroke="#FFFFFF" stroke-width="1">
                                南昌随舞官方群号：{{joinId}}
                            </text>
                            <text x="300" y="20" font-size="28" fill="#FF7B9C" text-anchor="middle"
                                dominant-baseline="middle">
                                南昌随舞官方群号：{{joinId}}
                            </text>
                        </svg>
                    </i>
                </div>
            </div>
        </div>
        <!--
        <div class="paper" :style="'--col:'+col+';'">
            <div class="bg">
                <span class="iconfont snow" style="
                left: -60px;top: -31px;font-size: 400px;transform: rotate(21deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                right: -100px;top: -85px;font-size: 500px;transform: rotate(9deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                left: -162px;top: 276px;font-size: 1026px;transform: rotate(-7deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                font-size: 813px;color: #fcd1c0a8; left: 50%;top: 50%; 
                transform: translateX(-418px) translateY(-500px) rotate(-10deg) ;
                ">&#xe6e6;</span>
            </div>
            <div class="paperContext">
                <div class="title">
                    <i class="blue">{{IPName}}</i>&nbsp;<span class="city">{{diQu}}</span><i class="red">随舞</i>
                </div>
                <div class="site_date"><i class="date">{{date}}</i> &nbsp;<span class="site">{{site}}</span></div>
                <i class="siteDetail">{{siteDetail}}</i>
                <template v-for="group in getList">
                    <div class="musicTag"><i>{{group.groupName}}</i>【{{group.children.length}}首】</div>
                    <div class="list">
                        <div class="listItem" v-for="(item,index) in group.children" :key="index" :class="!Math.floor(index/col%2)?'color1':'color2'">{{item}}</div>
                    </div>
                </template>
                <div class="joinBox">
                    <div class="join">
                        <div>歌单征集/档期预告/扩列等</div>
                        <div>请加入随舞交流群：{{joinId}}</div>
                    </div>
                    <img class="ewm" :src="erWeiMa" alt="">
                </div>
            </div>
        </div>-->
        <div class="buttonBox">
            <button @click="showDialog('dialog1')">设置</button>
            <br>
            <button @click="showDialog('dialog2')">歌曲</button>
            <br>
            <button @click="cutPage()">截图</button>
        </div>
        <dialog ref="dialog1">
            <div class="dialog1">
                <h2>设置属性</h2>
                <!-- <div class="row">
                    <label>主办:</label>
                    <input v-model="setting.IPName" type="text">
                </div> -->
                <!-- <div class="row">
                    <label>地区:</label>
                    <input v-model="setting.diQu" type="text">
                </div> -->
                <div class="row">
                    <label>日期:</label>
                    <input v-model="setting.date" type="text">
                </div>
                <div class="row">
                    <label>位置:</label>
                    <input v-model="setting.site" type="text">
                </div>
                <label>详细位置:</label>
                <textarea style="margin: 4px 0;font-size: 16px;" v-model="setting.siteDetail" rows="3"
                    cols="40"></textarea>
                <div class="row">
                    <label>群号:</label>
                    <input v-model="setting.joinId" type="text">
                </div>
                <!-- <div class="row">
                    <label>群名称:</label>
                    <input v-model="setting.joinName" type="text">
                </div> -->
                <div class="row">
                    <label>展示列数:</label>
                    <input v-model="setting.col" style="width: 0px;" type="number">
                    <label style="margin-left: 20px;">按字母排序:</label>
                    <input v-model="setting.isSort" type="checkbox" style="height: 20px;width: 0;">
                </div>
                <div class="row">
                    <label style="text-align: left;">自定义群二维码图片路径(不填/错填则不显示):</label>
                </div>
                <div class="row">
                    <input v-model="setting.erWeiMa" type="text">
                </div>
                <div class="row">
                    <button @click="dialog1Save()">保存</button>
                    <button @click="closeDialog('dialog1')">取消</button>
                </div>
            </div>
        </dialog>
        <dialog ref="dialog2">
            <div class="row">
                <label>小标题:</label>
                <input ref="title2" type="text">
            </div>
            <div>每个歌曲名称单独一行，默认按字母排序，可在设置更改</div>
            <textarea cols="40" rows="30" ref="musicList" style="width: 100%;"></textarea>
            <div class="row">
                <button @click="dialog2Save()">保存</button>
                <button @click="closeDialog('dialog2')">取消</button>
            </div>
        </dialog>
    </div>
    <script src="./lib/html2canvas1.4.1.js"></script>
    <script type="module">
        import { createApp, reactive } from './lib/vue3esm.mjs'
        import guHun from './lib/guHun.mjs'
        createApp({
            data() {
                return {
                    posterTitle: "随机宅舞",
                    str: '',
                    list: [],
                    title2: "Trach List",
                    // diQu: "自定义",
                    // IPName: "自定义",
                    date: '2025.1.11 15:00',                  // 时间
                    site: 'IN 莲塘百盛',               // 简略地址
                    siteDetail: '活动地点:南昌莲塘百盛1F\n交通路线:地铁三号线沥山1号口',   // 详细地址
                    joinId: '897350148',             // 群号
                    // joinName: '自定义随舞群',       // 群名称
                    col: 3,   // 列数
                    isSort: true,
                    erWeiMa: "./lib/poster/ewm.png",   // 自定义二维码地址
                    setting: {}
                }
            },
            computed: {
                getList() {
                    // let list = this.str.split(/\r?\n/).filter(line => line.trim().length > 0);
                    // 分组
                    const groupedData = [];
                    const allMatch = this.str.trim().match(/\${([^}]+)}\$/);
                    // console.log(allMatch);
                    if (allMatch === null || allMatch.index !== 0) {
                        groupedData.push({
                            groupName: "歌曲列表",
                            children: []
                        })
                    }
                    this.str.split(/\r?\n/).forEach(line => {
                        const match = line.match(/\${([^}]+)}\$/);
                        if (match) {
                            groupedData.push({
                                groupName: match[1],
                                children: []
                            })
                        } else {
                            // 跳过空行
                            if (line.trim().length) {
                                groupedData[groupedData.length - 1].children.push(line.trim())
                            }
                        }
                    });
                    // console.log(groupedData);
                    if (this.isSort) {
                        const sortedData = groupedData.map(item => ({
                            ...item,
                            children: [...item.children].sort(),
                        }));
                        return sortedData;
                    } else {
                        return groupedData;
                    }
                }
            },
            mounted() {
                let prop;
                if (!localStorage['setting']) {
                    prop = {
                        // diQu: this.diQu,
                        // IPName: this.IPName,
                        date: this.date,
                        site: this.site,
                        siteDetail: this.siteDetail,
                        joinId: this.joinId,
                        joinName: this.joinName,
                        col: this.col,
                        isSort: this.isSort,
                        erWeiMa: this.erWeiMa
                    };
                    localStorage['setting'] = JSON.stringify(prop);
                } else {
                    prop = JSON.parse(localStorage['setting']);
                }
                for (let key in prop) {
                    this[key] = prop[key];
                }
                this.setting = prop;
                if (localStorage['musicList']) {
                    let str = localStorage['musicList']
                    this.$refs['musicList'].value = str;
                    this.str = str;
                }
                if (localStorage['title2']) {
                    let str = localStorage['title2']
                    this.$refs['title2'].value = str;
                    this.title2 = str;
                } else {
                    this.$refs['title2'].value = this.title2;
                    localStorage['title2'] = this.title2;
                }
                // convertSvgToCanvas();
            },
            methods: {
                dialog1Save() {
                    localStorage['setting'] = JSON.stringify(this.setting);
                    for (let key in this.setting) {
                        this[key] = this.setting[key];
                    }
                    this.closeDialog('dialog1');
                },
                dialog2Save() {
                    this.str = this.$refs['musicList'].value;
                    this.title2 = this.$refs['title2'].value;
                    localStorage['musicList'] = this.str;
                    localStorage['title2'] = this.title2;
                    this.closeDialog('dialog2');
                },
                showDialog(refName) {
                    this.$refs[refName].showModal();
                },
                closeDialog(refName) {
                    if (refName == 'dialog2') {
                        this.$refs['musicList'].value = localStorage['musicList'] || '';
                    }
                    this.$refs[refName].close();
                },
                cutPage() {
                    html2canvas(document.querySelector(".paper")).then(canvas => {
                        // document.body.appendChild(canvas);
                        // 下载canvas图片
                        const a = document.createElement("a");
                        a.download = `${this.date}.png`;
                        a.href = canvas.toDataURL("image/png");
                        a.click();
                        // 移除canvas
                        canvas.remove();
                        alert('截图成功');
                    });

                },
                formatStr(text) {
                    let maxLength = 20;
                    switch (this.col) {
                        case 2:
                            maxLength = 20;
                            break;
                        case 3:
                            maxLength = 15;
                            break;
                        case 4:
                            maxLength = 12;
                            break;
                        case 5:
                            maxLength = 10;
                            break;
                    }
                    let currentWidth = 0;
                    let truncatedText = '';
                    let maxWidth = maxLength * 8;
                    for (let char of text) {
                        // 判断字符是中文字符（Unicode范围来大致判断）
                        let pattern = /[^a-zA-Z0-9.,;:!?\-_@#$%^&*()+=<>{}[\]\/\\|]/;
                        if (pattern.test(char)) {
                            currentWidth += 13; // 假设中文字符宽度为16px，可根据实际字体调整
                        } else {
                            currentWidth += 8; // 假设英文字符宽度为8px，可根据实际字体调整
                        }
                        if (currentWidth <= maxWidth) {
                            truncatedText += char;
                        } else {
                            return truncatedText + '...';
                        }
                    }
                    return truncatedText;
                }
            }
        }).mount('#app')
    </script>
</body>

</html>